import React, { Component } from 'react'
import {Card, Button, Form, message, Icon, Input, Radio,InputNumber, Select, Switch, DatePicker, TimePicker, Upload, Checkbox } from 'antd';
import moment from 'moment';
import './form.less';

const FormItem = Form.Item;
const TextArea = Input.TextArea;
class Register extends Component {
    state = {}
    // 上传之前限制上传的图片
    beforeUpload = (file)=>{
        const isJPG = file.type === 'image/jpeg';
        if (!isJPG) {
          message.error('You can only upload JPG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          message.error('Image must smaller than 2MB!');
        }
        return isJPG && isLt2M;
    }
    // 转换成base64格式的图片
    getBase64 = (img, callback) => {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
      }
    // 读取上传之后的服务端的图片
    handleChange = (info) => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
        // Get this url from response in real world.
        this.getBase64(info.file.originFileObj, imageUrl => this.setState({
            imageUrl,
            loading: false,
        }));
        }
    }
    handleSubmit = (e) => {
        e.preventDefault();
        let userInfo = this.props.form.getFieldsValue();
        message.success(JSON.stringify(userInfo))
    }
    render () {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: 24,
                sm: 4
            },
            wrapperCol: {
                xs: 24,
                sm: 12
            }
        }
        const offsetLayout = {
            wrapperCol: {
                xs: 24,
                sm: {
                    span: 12,
                    offset: 4
                }
            }
        }
        const stausData = [
            {value: '0', description: '咸鱼一条'},
            {value: '1', description: '风华正茂'},
            {value: '2', description: '创业者'},
            {value: '3', description: '小白一枚'}
        ]
        const hobbyData = [
            {value: '0', description: '写字'},
            {value: '1', description: '游泳'},
            {value: '2', description: '跑步'},
            {value: '3', description: '打篮球'},
            {value: '4', description: '画画'},
            {value: '5', description: '唱歌'},
            {value: '6', description: '骑行'},
            {value: '7', description: '麦霸'},
            {value: '8', description: '桌球'}
        ]
        return (
            <div>
                <Card title="注册表单">
                    <Form layout="horizontal">
                        <FormItem label="用户名" {...formItemLayout}>
                            {
                                getFieldDecorator('userName', {
                                    initialValue: '',
                                    rules: [{required: true, message: '用户名不能为空'}]
                                })(
                                    <Input prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>} placeholder="请输入用户名"></Input>
                                )
                            }
                        </FormItem>
                        <FormItem label="密码" {...formItemLayout}>
                            {
                                getFieldDecorator('userPwd', {
                                    initialValue: '',
                                    rules:[{required: true, message: '密码不能为空'}]
                                })(
                                    <Input prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>} type="password" placeholder="请输入密码"></Input>
                                )
                            }
                        </FormItem>
                        <FormItem label="性别" {...formItemLayout}>
                            {
                                getFieldDecorator('userSex', {
                                    initialValue: '0',
                                    rules:[]
                                })(
                                    <Radio.Group>
                                        <Radio value="0">男</Radio>
                                        <Radio value="1">女</Radio>
                                    </Radio.Group>
                                )
                            }
                        </FormItem>
                        <FormItem label="年龄" {...formItemLayout}>
                            {
                                getFieldDecorator('userAge', {
                                    initialValue: 18,
                                    rules:[]
                                })(
                                   <InputNumber min={1} max={100}></InputNumber>
                                )
                            }
                        </FormItem>
                        <FormItem label="当前状态" {...formItemLayout}>
                            {
                                getFieldDecorator('userStatus', {
                                    initialValue: '',
                                    rules:[]
                                })(
                                   <Select>
                                       {
                                           stausData.map((item) => <Select.Option key={item.value} value={item.value}>{item.description}</Select.Option>)
                                       }
                                   </Select>
                                )
                            }
                        </FormItem>
                        <FormItem label="爱好" {...formItemLayout}>
                            {
                                getFieldDecorator('userHobby', {
                                    initialValue: [],
                                    rules:[]
                                })(
                                   <Select mode="multiple">
                                       {
                                           hobbyData.map((item) => <Select.Option key={item.value} value={item.value}>{item.description}</Select.Option>)
                                       }
                                   </Select>
                                )
                            }
                        </FormItem>
                        <FormItem label="是否已婚" {...formItemLayout}>
                            {
                                getFieldDecorator('userIsMarried', {
                                    valuePropName:'checked',
                                    initialValue: false,
                                })(
                                  <Switch/>
                                )
                            }
                        </FormItem>
                        <FormItem label="生日" {...formItemLayout}>
                            {
                                getFieldDecorator('userBirthday', {
                                    initialValue: moment('2018-08-08')
                                })(
                                  <DatePicker showTime format="YYYY-MM-DD HH:mm:ss"/>
                                )
                            }
                        </FormItem>
                        <FormItem label="出生地" {...formItemLayout}>
                            {
                                getFieldDecorator('userLocal', {
                                    initialValue: ''
                                })(
                                  <TextArea autosize={{ minRows: 4, maxRows: 6 }}/>
                                )
                            }
                        </FormItem>
                        <FormItem label="早起时间" {...formItemLayout}>
                            {
                                getFieldDecorator('userDate', {
                                })(
                                  <TimePicker placeholder="请选择时间"/>
                                )
                            }
                        </FormItem>
                        <FormItem label="上传图片" {...formItemLayout}>
                            {
                                getFieldDecorator('userImg', {
                                    initialValue: ''
                                })(
                                  <Upload 
                                        listType="picture-card"
                                        showUploadList={false}
                                        action="//jsonplaceholder.typicode.com/posts/"
                                        onChange={this.handleChange}
                                        beforeUpload={this.beforeUpload}>
                                    {this.state.imageUrl ? <img src={this.state.imageUrl} alt=""/>: <Icon type="plus"/>}
                                  </Upload>
                                )
                            }
                        </FormItem>
                        <FormItem  {...offsetLayout}>
                            {
                                getFieldDecorator('userImg', {
                                    initialValue: ''
                                })(
                                    <Checkbox>我已阅读过<a href="">慕课协议</a></Checkbox>
                                )
                            }
                        </FormItem>
                        <FormItem  {...offsetLayout}>
                            <Button type="primary" onClick={this.handleSubmit}>注册</Button>
                        </FormItem>
                    </Form>
                </Card>
            </div>
        )
    }
}
// Form.create()(Register) ： 创建一个新的表单，并把当前表单传递进去
const RegisterForm = Form.create()(Register);
export default RegisterForm;